<template>
  <div class="user-container">
    <el-card class="box-card">
      <!-- /头部搜索区域 -->
      <el-row class="headSearch">
        <el-input
          v-model="query.username"
          placeholder="请输入内容"
          class="inputSeaqrch"
        ></el-input>
        <el-button @click="clearClick">清空</el-button>
        <el-button type="primary" @click="searchClick">搜索</el-button>
        <el-button
          type="success"
          class="searchbtn"
          @click="dialogFormVisible = true"
          >新增用户</el-button
        >
      </el-row>
      <!-- 警告区域 -->
      <el-alert
        class="alertrow"
        :title="'共' + userlist.length + '条数据'"
        type="info"
        show-icon
      >
      </el-alert>
      <!-- 表格数据区域 -->

      <el-table :data="userlist" style="width: 100%">
        <el-table-column prop="id" label="序号" width="180"> </el-table-column>
        <el-table-column prop="email" label="邮箱" width="180">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话"> </el-table-column>
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <el-table-column prop="permission_group_title" label="权限组名称">
        </el-table-column>
        <el-table-column prop="role" label="角色"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row.id)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[1, 2, 4, 8]"
        :page-size="query.pagesize"
        layout="prev, pager, next, sizes,  jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 添加用户区域 -->
    <el-dialog
      title="创建用户"
      :visible.sync="dialogFormVisible"
      @close="dialogClose"
    >
      <el-form
        :model="addform"
        v-model="addform"
        :rules="addfromrules"
        ref="addformref"
      >
        <el-form-item
          prop="username"
          label="用户名称"
          :label-width="formLabelWidth"
        >
          <el-input
            prop="name"
            v-model="addform.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="email" label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="addform.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          prop="password"
          label="密码"
          :label-width="formLabelWidth"
        >
          <el-input v-model="addform.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色" :label-width="formLabelWidth">
          <el-input v-model="addform.role" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="权限组名称" :label-width="formLabelWidth">
          <el-select v-model="addform.permission_group_id" placeholder="请选择">
            <el-option label="超级管理员组" value="2"></el-option>
            <el-option label="编辑组" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input v-model="addform.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="介绍" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="textarea"
          >
          </el-input>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="getAdduser('addform')"
            >确 定</el-button
          >
        </el-form-item>
        <el-form-item> </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 添加用户区域 -->
    <!-- 编辑用户区域 -->
    <el-dialog title="编辑用户" :visible.sync="editdialogFormVisible">
      <el-form
        :model="editform"
        v-model="editform"
        :rules="editformrules"
        ref="editform"
      >
        <el-form-item
          disable
          prop="username"
          label="用户名称"
          :label-width="formLabelWidth"
        >
          <el-input v-model="editform.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="email" label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="editform.email" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="角色" :label-width="formLabelWidth">
          <el-input v-model="editform.role" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="权限组名称" :label-width="formLabelWidth">
          <el-select
            v-model="editform.permission_group_id"
            placeholder="请选择"
          >
            <el-option label="超级管理员组" value="2"></el-option>
            <el-option label="编辑组" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input v-model="editform.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="介绍" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="editform.textarea"
          >
          </el-input>
          <el-button @click="editdialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="editOnclick('editform')"
            >确 定</el-button
          >
        </el-form-item>
        <el-form-item> </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 编辑用户区域 -->
    <!-- 删除 -->
    <el-dialog title="提示" :visible.sync="deletedialogVisible" width="30%">
      <span>是否确认删除</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deletedialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteOclick">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 删除 -->
  </div>
</template>

<script>
import {
  getuser,
  adduser,
  simpleuser,
  edituser,
  deleteuser
} from '@/api/default'

export default {
  data() {
    return {
      query: {
        page: 1, //   当前页码
        pagesize: 2, //  当前页面显示多少数据
        username: '',
        disabled: null //   是否屏蔽 1 屏蔽 0 开启
      },

      total: 0, //   总记录数
      userlist: [],
      // inputValue: '',
      textarea: '', //  多行文本输入
      deleteid: '',
      dialogFormVisible: false,
      editdialogFormVisible: false,
      deletedialogVisible: false,
      // 编辑用户对象
      editform: {
        avatar: '',
        email: '',
        id: '',
        introduction: '',
        permission_group_id: '',
        phone: '',
        role: '',
        username: ''
      },
      // 添加用户对象:
      addform: {
        avatar: '',
        email: '',
        introduction: '',
        password: '123456',
        permission_group_id: 2,
        phone: '',
        role: '',
        username: ''
      },
      account: '', //  用户名称
      region: '', //  权限
      formLabelWidth: '120px',
      // 添加验证的规则
      addfromrules: {
        username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入y邮箱', trigger: 'blur' },
          { min: 5, max: 17, message: '长度在 5 到 17个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
        ]
      },
      editformrules: {
        username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入y邮箱', trigger: 'blur' },
          { min: 5, max: 17, message: '长度在 5 到 17个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getUserlist()
  },

  methods: {
    // 当前页pagesize的监听
    handleSizeChange(newepagesize) {
      this.query.pagesize = newepagesize

      this.getUserlist()
    },
    // 页码值切换
    handleCurrentChange(newpage) {
      this.query.page = newpage

      this.getUserlist()
    },
    // 请求用户列表数据
    async getUserlist() {
      const res = await getuser(this.query)
      // data.list.forEach((item) => {
      //   console.log(item)
      //   this.userlist.push(...item)
      //   console.log(this.userlist)
      // })

      if (res.status !== 200) {
        return console.log('获取数据失败')
      }
      // this.userlist.push(...res.data.list)
      this.userlist = res.data.list
      this.total = res.data.counts
      // console.log(...this.userlist)
    },
    // 添加用户
    async getAdduser() {
      const res = await adduser({
        avatar: this.addform.avatar,
        email: this.addform.email,
        introduction: this.addform.introduction,
        password: this.addform.password,
        permission_group_id: Number(this.addform.permission_group_id),
        phone: this.addform.phone,
        role: this.addform.role,
        username: this.addform.username
      })
      console.log(res)
      if (res.status !== 200) {
        this.$message.error('添加用户失败')
      } else {
        this.$message.success('添加成功')
      }
      this.dialogFormVisible = false

      this.getUserlist()
    },
    // 表单重置
    dialogClose() {
      this.$refs.addformref.resetFields()
    },
    //  展示编辑用户
    async handleEdit(id1) {
      //  根据id获取用户数据
      this.editdialogFormVisible = true
      const res = await simpleuser({
        id: id1,
        title: this.addform.permission_group_id
      })
      console.log(res)
      if (res.status !== 200) {
        this.$message.error('获取数据失败')
      }
      // 保存用户数据
      console.log(id1)
      const a = res.data.find((item) => {
        return item.id === id1
      })
      console.log(a)
      this.editform = a
      // console.log(this.editform)
      // 渲染页面
    },

    // 确认编辑
    editOnclick(editform) {
      // 表单的预验证

      this.$refs[editform].validate(async (valid) => {
        console.log(this.editform)
        if (!valid) return
        //  发起编辑请求
        this.editdialogFormVisible = false
        console.log(this.editform)
        const res = await edituser(this.editform.id, {
          // avatar: this.editform.avatar || '',
          email: this.editform.email,
          // introduction: this.editform.introduction || '1',
          permission_group_id: Number(this.editform.permission_group_id) || 1,
          // phone: this.editform.phone || '13375412825',
          role: this.editform.role || '哈哈',
          username: this.editform.username
          // id: this.editform.id
        })
        this.getUserlist()
        console.log(res)
      })
    },
    editresetForm() {
      this.$refs.editform.resetFields()
    },
    // 显示删除用户对话框
    async handleDelete(id) {
      // 通过插槽获取到的数据
      this.deletedialogVisible = true
      this.deleteid = id
    },

    async deleteOclick() {
      await deleteuser(this.deleteid)
      this.getUserlist()
      this.deletedialogVisible = false
    },
    // 搜索用户
    async searchClick() {
      await getuser(this.query.username)
      this.getUserlist()
      this.query.username = null
    },
    // 清空
    clearClick() {
      this.query.username = null
      this.getUserlist()
    }
  }
}
</script>

<style lang="less" scoped>
.user-container {
  .inputSeaqrch {
    width: 30%;
    margin-right: 10px;
  }
  .headSearch {
    display: flex;
    position: relative;
    .searchbtn {
      position: absolute;
      right: 0;
    }
  }
  .alertrow {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .iconedit {
    margin-left: 4px;
    margin-right: 11px;
  }
}
</style>
